<template>
<div>
  <a-layout id="components-layout-demo-custom-trigger" style="height:100%">
    <a-layout-sider :trigger="null" collapsible v-model="collapsed" class="nav" style="min-width:256px;height:100%">
      <div class="logo" />
      <!-- 侧边导航 -->
      <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['0']">
        <a-menu-item key="0">
          <a-icon type="user" />
          <span>
            <router-link :to="navList[0].link">{{navList[0].title}}</router-link>
          </span>
        </a-menu-item>
        <a-sub-menu v-for="(title,index) of navList" :key="index" v-if="index != 0">
          <span slot="title">
            <a-icon :type="icon[index]" /><span>{{title.title}}</span></span>
          <a-menu-item v-for="(item,i) of title.children" :key="i">
            <router-link :to="item.link">{{item.item}}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

    <a-layout :class="[{right:true},{fold:collapsed}]" style="height:100%">
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="()=> collapsed = !collapsed" />
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
    
  </a-layout>
</div>
</template>

<script >
export default {
  data() {
    return {
      collapsed: false,
      navList: [{
          title: '主页',
          link: '/'
        },
        {
          title: "用户管理",
          children: [{
            item: "用户列表",
            link: "/user"
          }, ]
        },
        {
          title: "广告管理",
          children: [{
              item: "广告列表",
              link: "/advert"
            },
            {
              item: "页面管理",
              link: "/pageManage"
            },
          ]
        },
        {
          title: "平台管理",
          children: [{
            item: "币值管理",
            link: "/currency"
          }, ]
        },
        {
          title: "应用管理",
          children: [{
            item: "应用列表",
            link: "/appList"
          }, ]
        },
        {
          title: "安全管理",
          children: [{
            item: "操作日志",
            link: "/operation"
          }, ]
        },
        {
          title: "系统管理",
          children: [{
              item: "管理员列表",
              link: "/admin"
            },
            {
              item: "角色管理",
              link: "/role"
            }
          ]
        }
      ],
      icon: [
        "ios-stats",
        "user",
        "ios-image",
        "table",
        "profile",
        "warning",
        "ios-cog"
      ]
    };
  }
};
</script>

<style scoped lang="less">
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}
</style>
